<script setup>
import Main from './theMain.vue'
import { ref } from 'vue'

const isshow = ref(1)

const changeIsshow = (num) => {
  isshow.value = num.props.name
}
</script>
<template>
  <el-row>
    <el-col :span="6">
      <img
        src="https://bpic.588ku.com/back_pic/06/12/26/766239758925bd9.jpg"
        alt=""
        style="height: 729px"
    /></el-col>
    <el-col :span="18">
      <div class="nav">
        <!-- <div class="logo"></div> -->
        <img src="@/assets/image/logo.png" />
        <el-tabs class="demo-tabs" @tab-click="changeIsshow">
          <el-tab-pane label="登录/注册" name="1"></el-tab-pane>
          <el-tab-pane label="用户协议" name="2"></el-tab-pane>
          <el-tab-pane label="隐私协议" name="3"></el-tab-pane>
          <el-tab-pane label="帮助中心" name="4"></el-tab-pane>
          <el-tab-pane label="联系客服" name="5"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="main">
        <Main :isshow="+isshow" />
      </div>
    </el-col>
  </el-row>
</template>
<style lang="scss" scoped>
.nav {
  display: flex;
  justify-content: space-between;
  img {
    height: 70px;
    padding-left: 10px;
  }
  .demo-tabs {
    margin-top: 10px;
    margin-right: 20px;
  }
}

.main {
  width: 400px;
  height: 500px;
  background-color: rgba(
    red($xtxColor),
    green($xtxColor),
    blue($xtxColor),
    0.1
  );
  margin: 50px auto;
  border-radius: 5%;
  padding: 30px;
  border: 2px solid $xtxColor;
}
</style>
